<template>
  <!-- 主屏页面 -->
  <v-app class="initial-container">
    <div class="header">
    <v-layout justify-space-between align-center>
      <v-flex md3>
        <span class="headline">{{ $t("login.headerTitle") }}</span>
      </v-flex>
      <v-flex md3 d-flex>
        <v-btn @click="$router.push('login')" color="secondary" round class="action-button">
          <span class="title">{{ $t("login.login") }}</span>
        </v-btn>
        <v-btn @click="$router.push('register')" primary round class="action-button">
          <span class="title">{{ $t("login.register") }}</span>
        </v-btn>
      </v-flex>
    </v-layout>
    </div>
    <v-footer color="secondary"  app>
      <div class="white--text pl-4">&copy; {{new Date().getFullYear()}}</div>
    </v-footer>
  </v-app>
</template>

<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Login extends Vue {
  
}
</script>


<style lang="less">
.initial-container {
  background-size: 100% 100%!important;
  background-position-y: 80%!important;
  background-repeat: no-repeat!important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-image: url(../../assets/background.png)!important;
  .header {
    height: 4rem;
  }
  .action-button {
    height: 3rem;
  }
}
</style>

